<template>
  <div>
    <el-descriptions border :title="props.title" :column="2" class="production">
      <el-descriptions-item label="商品编码" label-align="center" :width="80">
        {{ props.productionInfo.goodsCode }}
      </el-descriptions-item>
      <el-descriptions-item label="商品标题" label-align="center" :width="80">
        {{ props.productionInfo.goodsTitle }}
      </el-descriptions-item>
      <el-descriptions-item label="商品品牌名称" label-align="center">
        {{ props.productionInfo.brandName }}
      </el-descriptions-item>
      <el-descriptions-item label="商品分类名称" label-align="center">
        {{ props.productionInfo.categoryName }}
      </el-descriptions-item>
      <el-descriptions-item label="商品型号名称" label-align="center">
        {{ props.productionInfo.typeName }}
      </el-descriptions-item>

      <el-descriptions-item label="眼别" label-align="center">
        <el-tag type="success">
          {{
            props.productionInfo.eyeType == 1
              ? "左眼"
              : props.productionInfo.eyeType == 2
              ? "右眼"
              : "综合"
          }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="销售单价(元)" label-align="center">
        {{
          props.productionInfo.priceAtOrder
            ? (props.productionInfo.priceAtOrder / 100).toFixed(2)
            : 0
        }}
      </el-descriptions-item>
      <el-descriptions-item label="退换货数量" label-align="center">
        {{ props.quantity ? props.quantity : props.productionInfo.count }}
      </el-descriptions-item>
      <el-descriptions-item label="折扣金额(元)" label-align="center">
        {{
          props.productionInfo.discount
            ? (props.productionInfo.discount / 100).toFixed(2)
            : 0
        }}
      </el-descriptions-item>
      <el-descriptions-item label="退换货总金额/差价(元)" label-align="center">
        {{
          props.productionInfo.amount
            ? (props.productionInfo.amount / 100).toFixed(2)
            : 0
        }}
      </el-descriptions-item>

      <el-descriptions-item label="库存编码" label-align="center">
        <el-scrollbar max-height="80px">
          <el-alert
            v-for="(item, index) in props.productionInfo.codes"
            :key="index"
            :closable="false"
            :title="item"
            class="mb-1"
          />
        </el-scrollbar>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

onMounted(() => {});
const props = defineProps({
  title: {
    type: String,
    default: "退换货商品信息",
  },
  quantity: {
    type: Number,
    default: 0,
  },
  productionInfo: {
    type: Object,
    default: () => {
      //   return {
      //     goodsCode: "",
      //     goodsTitle: "",
      //     brandName: "",
      //     categoryName: "",
      //     typeName: "",
      //     eyeType: 1,
      //     priceAtOrder: 0,
      //     count: 0,
      //     discount: 0,
      //     amount: 0,
      //     description: "",
      //     goodsSpecName: "",
      //   };
    },
  },
});
</script>

<style scoped lang="scss">
:deep(.el-alert) {
  padding: 3px 10px;
}
</style>